<template>
  <div id="mapBox">
    <div id="allmap" style="width: 100%;height: 100%;"></div>
    <el-dialog :title="showObj.type" :visible.sync="showObjVisible" class="showObjBar">
      <div class="showObjBoxFloor1">
        <div class="left" v-if="showObj.topImg">
          <el-carousel class="carousel" indicator-position="none" trigger="click" height="120px">
            <el-carousel-item v-for="(item,index) in showObj.topImg" :key="index">
              <img :src="item" alt="">
            </el-carousel-item>
            <el-carousel-item v-for="(item,index) in showObj.topImg" :key="index + 10">
              <img :src="item" alt="">
            </el-carousel-item>
            <el-carousel-item v-for="(item,index) in showObj.topImg" :key="index + 20">
              <img :src="item" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right">
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 90px;">地址：</label>
            <div class="el-form-item__content" style="margin-left: 90px;">
              {{ showObj.address }}
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 90px;">值班人员：</label>
            <div class="el-form-item__content" style="margin-left: 90px;">
              {{ showObj.watchman }}
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 90px;">电话：</label>
            <div class="el-form-item__content" style="margin-left: 90px;">
              {{ showObj.tel }}
            </div>
          </div>
        </div>
      </div>
      <div class="showObjBoxFloor2">
        <el-tabs style="width: 100%;">
          <el-tab-pane v-for="(item,index) in showObj.telTab" :label="item.name" :name="index+''">
            <img :src="item.url" alt="">
          </el-tab-pane>
        </el-tabs>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "MapBox",
    data: () => {
      return {
        map: null,
        showObj: {},
        icon:{
          sy: new BMap.Icon("/static/map-img/icon/水压.png", new BMap.Size(25, 25)),
          sz: new BMap.Icon("/static/map-img/icon/水质.png", new BMap.Size(25, 25)),
          sk: new BMap.Icon("/static/map-img/icon/水库.png", new BMap.Size(25, 25)),
          sc: new BMap.Icon("/static/map-img/icon/水厂.png", new BMap.Size(25, 25)),
          jy: new BMap.Icon("/static/map-img/icon/加压.png", new BMap.Size(25, 25)),
          ll: new BMap.Icon("/static/map-img/icon/流量.png", new BMap.Size(25, 25)),
        },
        showObjVisible: false,
      }
    },
    mounted() {
      const th = this
      th.map = new BMap.Map("allmap");
      th.map.setMapStyle({
        styleJson: [
          {
            "featureType": "arterial",
            "elementType": "geometry.fill",
            "stylers": {
              "color": "#046175ff",
              "weight": "0.3"
            }
          },
          {
            "featureType": "water",
            "elementType": "geometry.fill",
            "stylers": {
              "color": "#5d9b9eff",
              "weight": "0.1"
            }
          },
          {
            "featureType": "building",
            "elementType": "geometry.fill",
            "stylers": {
              "color": "#9fc5e8ff",
              "weight": "0.1"
            }
          },
          {
            "featureType": "local",
            "elementType": "geometry.fill",
            "stylers": {
              "color": "#046175ff",
              "weight": "0.1"
            }
          },
          {
            "featureType": "land",
            "elementType": "all",
            "stylers": {
              "color": "#190641ff"
            }
          }
        ]
      });
      th.map.centerAndZoom(new BMap.Point(106.833534, 28.139181), 16);

      const markers = [
        {
          type: '在线水质传感器',
          icon: 'sz',
          point: '106.833534,28.139181',
          tel: '1814309802', //电话
          address: '地址楚米中学右侧', //地址
          watchman: '杨志忠', //值班
          topImg: ['/static/map-img/top/水质.png'], //
          telTab: [{'name':'PH',url:'/static/map-img/shuizi/ph.png'},
            {'name':'余氯',url:'/static/map-img/shuizi/余氯.png'},
            {'name':'浊度',url:'/static/map-img/shuizi/浊度.png'}],
        },
        {
          type: '在线水压传感器',
          icon: 'sy',
          point: '106.831334,28.139281',
          tel: '18866668888', //电话
          address: '地址老北街', //地址
          watchman: '梁海明', //值班
          topImg: ['/static/map-img/top/水压.png'], //
          telTab: [{'name':'水压',url:'/static/map-img/shuizi/水压.png'}],
        },
        {
          type: '在线流量传感器',
          icon: 'll',
          point: '106.831334,28.134281',
          tel: '13689433092', //电话
          address: '娄山关镇将军希望小学', //地址
          watchman: '刘朝阳', //值班
          topImg: ['/static/map-img/top/流量.png'], //
          telTab: [{'name':'流量',url:'/static/map-img/shuizi/流量.png'}],
        },
        {
          type: '水库检测',
          icon: 'sk',
          point: '106.844334,28.141281',
          tel: '13689433092', //电话
          address: '新桥水库', //地址
          watchman: '杨志忠', //值班
          telTab: [
            {'name':'PH',url:'/static/map-img/shuizi/ph.png'},
            {'name':'浊度',url:'/static/map-img/shuizi/浊度.png'},
            {'name':'余氯',url:'/static/map-img/shuizi/余氯.png'},
            {'name':'水位',url:'/static/map-img/shuizi/水位.png'},
            {'name':'温度',url:'/static/map-img/shuizi/温度.png'},
            {'name':'降雨量',url:'/static/map-img/shuizi/降雨量.png'},
          ],
        },
        {
          type: '水厂检测',
          icon: 'sc',
          point: '106.842334,28.139281',
          tel: '13689433092', //电话
          address: '北郊水厂', //地址
          watchman: '杨志忠', //值班
          telTab: [
            {'name':'PH',url:'/static/map-img/shuizi/ph.png'},
            {'name':'浊度',url:'/static/map-img/shuizi/浊度.png'},
            {'name':'余氯',url:'/static/map-img/shuizi/余氯.png'},
            {'name':'水压',url:'/static/map-img/shuizi/水压.png'},
            {'name':'流量',url:'/static/map-img/shuizi/流量.png'},
            {'name':'设备故障',url:'/static/map-img/shuizi/设备故障.png'},
          ],
        },
        {
          type: '加压泵站',
          icon: 'jy',
          point: '106.837334,28.135281',
          tel: '13689433092', //电话
          address: '娄山关镇将军希望小学', //地址
          watchman: '刘朝阳', //值班
          telTab: [
            {'name':'PH',url:'/static/map-img/shuizi/ph.png'},
            {'name':'浊度',url:'/static/map-img/shuizi/浊度.png'},
            {'name':'余氯',url:'/static/map-img/shuizi/余氯.png'},
            {'name':'设备故障',url:'/static/map-img/shuizi/设备故障.png'},
          ],
        }
      ]


      markers.forEach((item) => {
        th.addMarker(item.point.split(','), item);
      })
    },
    methods: {
      addMarker(points, obj) {
        const th = this,
          marker = new BMap.Marker(new BMap.Point(points[0], points[1]), {
            icon: th.icon[obj.icon],
            title: obj.type,
            offset: new BMap.Size(-10, -25),
          });
        marker.obj = obj
        marker.addEventListener("click", function () {
          th.showObj = this.obj;
          setTimeout(function () {
            th.showObjVisible = true
          }, 100)
        });
        th.map.addOverlay(marker);
      },
    }
  }
</script>

<style type="text/css" rel="stylesheet/scss" lang="scss">
  #mapBox {

    .showObjBar .el-dialog {
      width: 60%;
      min-width: 380px;
    }
    .showObjBar.p .el-dialog {
      width: 50%;
      min-width: 350px;
    }

    .showObjBar .el-form-item {
      margin-bottom: 0;
    }

    .showObjBar .el-form-item__label {
      line-height: 32px;
    }

    .showObjBar .el-form-item__content {
      line-height: 20px;
      padding: 6px 0;
    }

    .showObjBar .el-form-item__content::after, .showObjBar .el-form-item__content::before {
      content: none;
    }

    .showObjBar .el-table {
      margin-top: 15px;
    }

    .showObjBar .el-table td, .showObjBar .el-table th {
      padding: 6px;
      text-align: center;
    }
    .showObjBar .el-carousel__item {
      display: flex;
      justify-content: center;
    }
    .showObjBar .carousel img {
      height: 100%;
    }
    .showObjBoxFloor1, .showObjBoxFloor2 {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .showObjBoxFloor1 .left, .showObjBoxFloor2 .left {
      width: 40%;
    }
    .showObjBoxFloor1 .left {
      padding: 0 15px;
    }
    .showObjBoxFloor1 .right, .showObjBoxFloor2 .right {
      width: 60%;
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .showObjBar .el-dialog {
      width: 800px;
      margin-top: 10%;
    }
    .showObjBoxFloor1 .right, .showObjBoxFloor2 .right, .showObjBoxFloor1 .left, .showObjBoxFloor2 .left {
      padding: 0;
    }
    .showListBox {
      max-height: 250px;
    }

    .showList_right {
      width: 27%;
      padding: 4px;
      height: 57px;
    }

    .showList_left {
      width: 73%;
      font-size: .75rem;
    }
  }

</style>
